<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
    <link rel="stylesheet" href="../../static/css/public.css">
    <link rel="stylesheet" href="../../static/css/element-ui.css">

    <script src="../../static/js/vue.js"></script>
    <script src="../../static/js/axios.min.js"></script>
    <script src="../../static/js/element-ui.js"></script>
</head>
<body>
    <div id="app">
        <div class="login-container">
            <el-form ref="form" :model="form" :rules="rules" label-width="80px" class="login-form">
                <h2 class="login-title">Demo</h2>
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="form.username"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input type="password" v-model="form.password"></el-input>
                    <el-link :underline="false" href="/account/register" type="primary">用户注册</el-link>
                </el-form-item>

                <el-form-item class="login-button">
                    <el-button type="primary" @click="submitForm('form')">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</body>
</html>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            form: {
                username: '',
                password: ''
            },
            rules: {
                username: [
                    {required: true, message: "用户名不能为空", trigger: 'blur'},
                    {min: 3, max: 10, message: "用户名3-5位", trigger: 'blur'}
                ],
                password: [
                    {required: true, message: "密码不能为空", trigger: 'blur'},
                    {min: 6, max: 20, message: "密码6-20位", trigger: 'blur'}
                ]
            }
        },
        methods: {
            submitForm(formName) {
                let that = this;
                var username = that.form.username;
                var password = that.form.password;
                that.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios.get('/account/getLoginData', {
                            params:{
                                username: username,
                                password: password
                            }
                        })
                        .then(function (response) {
                            // ELEMENT.Message.success("success");
                            data = response.data;
                            if(data.code == 0) {
                                window.location.href="/index/index";
                            } else {
                                that.$message({
                                    message: '错了哦',
                                    type: 'error'
                                });
                            }
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                    } else {
                        console.log('验证失败');
                        return false;
                    }
                });
            }
        }
    })
</script>